<template>
	<view>
		<view v-if="prompt" class="nl-flex-list">
			<text class="grey">图片上传</text>
			<view class="right-grey">
				{{photoCount}} / {{maxCount}}
			</view>
		</view>
		<view class="upload-img-style">
			<u-upload ref="uUpload" @on-list-change="photoCount_1" :custom-btn="true" :width="width+'rpx'"
				:height="height+'rpx'" :max-count="maxCount" :auto-upload="false" :file-list="fileList"
				del-bg-color="#fff" del-color="#AFAFAF" :source-type="sourceType">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="145">
					<u-icon name="camera" size="50" :color="$u.color['lightColor']"></u-icon>
				</view>
			</u-upload>
		</view>
	</view>

</template>

<script>
	export default {
		name: "uploadImg",
		props: {
			maxCount: {
				type: [Number, String],
				default: 4
			},
			width: {
				type: [Number, String],
				default: 145
			},
			height: {
				type: [Number, String],
				default: 145
			},
			prompt: {
				type: Boolean,
				default: false
			},
			sourceType: {
				type: [Array, String],
				default: ['album', 'camera']
			}
		},
		data() {
			return {
				photoCount: 0,
				fileList: []
			};
		},
		methods: {
			photoCount_1(lists, name) {
				let that = this
				let photoSrc = []
				let imgData = []
				for (let i = 0; i < lists.length; i++) {
					uni.getFileSystemManager().readFile({
						filePath: lists[i].url,
						encoding: 'base64',
						success: res => {
							let imgObj = {
								photo: ''
							}
							imgObj.photo = 'data:image/jpeg;base64,' + res.data
							photoSrc.push(imgObj)
						}
					})
					
					// 获取照片信息
					uni.getImageInfo({
						src: lists[i].url,
						success: image => {
							imgData.push(image)
						}
					});
				}
				this.photoCount = lists.length
				this.$emit('photos', photoSrc)
				
				that.$emit('photosData', imgData)
			},
		}
	}
</script>

<style lang="scss">
	.grey {
		color: $nl-text-color-grey;
	}

	.upload-img-style {
		border-bottom: 2rpx solid #f8f8f8;
		padding: 12rpx;

		.slot-btn {
			width: 146rpx;
			height: 146rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border: 3px solid #F0F0F0;
			border-radius: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>
